<!--
	作者：956911785@qq.com
	时间：2019年11月16日23:12:05
	描述：诗词语音上传
-->

<template>
	<Modal title="诗词语音上传" v-model="modal0" width="500px">
		<Form ref="params" :model="params" :rules="ruleValidate" :label-width="120" label-position="left">
			<div style="width:100%;height:200px; overflow-y: scroll;">
				<div style="width:100%;height: 60px;line-height: 60px;float:left;">
					<FormItem  prop="MC" label="语音名称">
						<Input v-model="params.MC" placeholder="请输入语音名称" clearable style="width: 90%"></Input>
					</FormItem>
		      	</div>

				<div style="width:100%;height: auto;float:left;">
					<div style="float:left;">
						<FormItem label="诗词语音">
							<Upload
								ref="upload"
								:show-upload-list="false"
								:on-success="handleSuccess"
								:format="['m4a','mp3','mp4']"
								:max-size="10240"
								:on-format-error="handleFormatError"
								:on-exceeded-size="handleMaxSize"
								type="drag"
								:action="action"
								style="display: inline-block;width:80px;">
								<div style="width: 80px;height:80px;line-height: 80px;">
									<Icon type="md-mic" size="20"></Icon>
								</div>
							</Upload>
						</FormItem>
					</div>
					<template v-if="params.YP">
						<div style="float:left;width:80px;margin-left:10px;border:1px dashed #2d8cf0;">
							<div style="float:left;width:80px;height:80px;text-align: center;line-height: 80px;">
								<Icon type="md-microphone" size="20"></Icon>
							</div>
							<div style="width:80px;float:left;text-align: center;">
								<Icon type="ios-trash-outline" style="font-size:16px;" @click.native="handleRemove()"></Icon>
							</div>
						</div>
					</template>
				</div> 
				
		   </div> 
	    </Form>
	   	<div slot="footer">
	    	<Button type="text"  @click="closeModal()">取消</Button>
	    	<Button type="primary" @click="addsave()" >确定</Button>
	    </div>
    </Modal>
</template>

<script>

	const _config = require('./../../../../config/config')
	export default {
		name:"tconent",
		props: {
    		
    	},
		data() {
			//长度控制
			const lenPass = (rule, str, callback) => {
			  if(str.length>rule.length){
			  	 callback(new Error('字符串长度在1-'+rule.length+'之间！'));
			  }
			  return callback();
			};
			return {
				ruleValidate: {
		            MC: [
		                {required: true, message: '请输入语音名称！', trigger: 'blur'},
		                {length:30,validator:lenPass,trigger:'blur'}
		            ],
		        },   
                modal0:false,
                params:{
                	MC:'', 
                	YP:'', 
                },
				action:_config._ADMIN_SERVER+'/readbook/upload/filesUploadmusic.html',
			}
		},
		methods: {
			addsave:function(){
				var yp=this.params.YP;
				if(yp==""){
					this.$Modal.success({
					    title: "提示",
					    content: "请上传音频！"
					});
					return;
				}
				this.$refs.params.validate((valid) => {
					if (valid){
						const params={...this.params};
						this.$emit("scyysave",params);
                    }
                })
	        }, 
		
            closeModal(){
	      	    this.modal0 = false;
	      	    this.resetpar();
	        },
	        resetpar(){
	        	this.params={
	        		MC:'', 
	        		yp:'', 
				};
				
	        },

			//<!------------------------诗词语音start------------------>
			//上传成功后
			handleSuccess(res, file) {
				this.params.YP=res[0].FILE_PATH;
			},
			handleRemove() {
				this.params.YP="";
			},
			//<!------------------------诗词语音end------------------>
			 

			//上传失败提示
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件上传失败',
                    desc: '文件' + file.name + '无法上传, 上传文件请选择mp3 or mp4 or ma4.'
                });
            },
			//上传文件的大小
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '提示',
                    desc: '文件  ' + file.name + ' 太大, 上传的文件不能超过2M.'
                });
            },
            
            
		},
		mounted() {
		},
		watch:{
			modal0(news,olds){
				if(!news){
					 this.resetpar();
				}
			}
		},
		computed: {
		
		}
		
	}
</script>

<style scoped="scoped">
	
</style>



